<template>
    <div class="leftwrap">
        <el-row class="tac">
            <el-col :span="12">
                <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                    background-color="#545c64" text-color="#fff" :router="true" active-text-color="#ffd04b"
                    :unique-opened="true">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-document"></i>
                            <span>首页</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/Indexx">系统介绍</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span>学生信息管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/InfoInput">学生信息输入</el-menu-item>
                            <el-menu-item index="/InfoInquer">学生信息查询</el-menu-item>
                            <el-menu-item index="/InfoInquerImg">学生信息查询-包含头像</el-menu-item>
                            <el-menu-item index="/InfoInquerNoImg">学生信息查询-不包含头像</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-document-copy"></i>
                            <span>学生成绩管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/ScoreInput">考试成绩录入</el-menu-item>
                            <!-- 里面做四个路由组件：三个时期加上一个全部 -->
                            <el-menu-item index="/EnterExamScoreInquire">入学考试查询</el-menu-item>
                            <el-menu-item index="/MidExamScoreInquire">期中考试查询</el-menu-item>
                            <el-menu-item index="/EndExamScoreInquire">期末考试查询</el-menu-item>
                            <el-menu-item index="/AllScoreInquire">全部成绩查询</el-menu-item>
                            <el-menu-item index="/DeleteScore">学生成绩删除</el-menu-item>
                            <el-menu-item index="/ChangeScore">学生成绩修改</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {
    Row,
    Col,
    Menu,
    Submenu,
    MenuItemGroup,
    MenuItem
} from 'element-ui'
export default {
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    },
    components: {
        "el-row": Row,
        "el-col": Col,
        "el-menu": Menu,
        "el-submenu": Submenu,
        "el-menu-item-group": MenuItemGroup,
        "el-menu-item": MenuItem,
    }
}
</script>

<style lang="scss" scoped>
.leftwrap {
    background-color: #545C64;

    .el-col,
    .el-col-12 {
        width: 330px;
    }

    .tac /deep/ .el-submenu__title {
        height: 100px;
        line-height: 100px;
    }

    .leftwrap .tac .el-submenu__title {
        font-size: 100px;
    }

    .tac .el-menu-item ul li {
        box-sizing: border-box;
    }

    .tac .el-menu-item-group {
        width: 100%;
        overflow: hidden;
    }

    .tac /deep/ .el-menu-item-group__title {
        display: none !important;
        height: 0;
        font-size: 20px;
    }

    .tac /deep/ .el-menu-vertical-demo {
        height: 80vh;
    }

    .tac /deep/ .el-menu-item {
        height: 50px;
        line-height: 50px;
        font-size: 20px;
    }

    div {
        height: 100px;
    }

    li {
        font-size: 80px;
    }

    span {
        font-size: 23px;
    }

    i {
        font-size: 23px;

    }
}
</style>